<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="dataForm">
      <el-form-item label="服务单号">
        <el-input v-model="dataForm.rights_code" placeholder="请输入服务单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="dataForm.order_code" placeholder="请输入订单编号" clearable></el-input>
      </el-form-item>
      <el-form-item label="所属店铺">
        <el-input v-model="dataForm.shop_name" placeholder="请输入所属店铺" clearable></el-input>
      </el-form-item>
      <el-form-item label="售后类型">
        <el-select v-model="dataForm.rights_type" clearable placeholder="请选择售后类型">
          <el-option label="仅退款" :value="1"></el-option>
          <el-option label="退款退货" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下单人手机号">
        <el-input v-model="dataForm.order_creator_mobile" maxlength="11" placeholder="请输入下单人手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="客户手机号">
        <el-input v-model="dataForm.receiver_mobile" maxlength="11" placeholder="请输入客户手机号" clearable></el-input>
      </el-form-item>
      <el-form-item label="售后状态">
        <el-select v-model="dataForm.refund_status" clearable placeholder="请选择售后状态">
          <el-option label="待退款" :value="0"></el-option>
          <el-option label="退款成功" :value="1"></el-option>
          <el-option label="退款失败" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="售后操作">
        <el-select v-model="dataForm.operate_status" clearable placeholder="请选择售后操作">
          <el-option label="申请" :value="0"></el-option>
          <el-option label="同意" :value="1"></el-option>
          <el-option label="买家已发货" :value="2"></el-option>
          <el-option label="商家已收到退货商品" :value="3"></el-option>
          <el-option label="商家发起退款支付" :value="4"></el-option>
          <el-option label="已支付退款" :value="5"></el-option>
          <el-option label="拒绝" :value="6"></el-option>
          <el-option label="自动关闭" :value="7"></el-option>
          <el-option label="主动撤消" :value="8"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单类别">
        <el-select v-model="dataForm.third" clearable placeholder="请选择订单类别">
          <el-option label="全部" :value="-1"></el-option>
          <el-option label="普通订单" :value="0"></el-option>
          <el-option label="第三方订单" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="search()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" row-key="id" border style="width: 100%; ">
      <el-table-column prop="rights_code" align="center" label="服务单号">
      </el-table-column>
      <el-table-column prop="order_code" align="center" label="订单编号">
      </el-table-column>
      <el-table-column prop="shop_name" align="center" label="所属店铺">
      </el-table-column>
      <el-table-column prop="third" align="center" label="订单类别">
        <template slot-scope="{row}">
          <div>
            <el-tag>{{ row.third ? '第三方订单' : '普通订单' }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="auditStatus" align="center" label="售后类型">
        <template slot-scope="scope">
          <el-tag effect="plain" type="warning" v-if="scope.row.rights_type == 1">仅退款</el-tag>
          <el-tag effect="plain" type="success" v-if="scope.row.rights_type == 2">退货退款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="practicalSales" align="center" label="客户信息">
        <template slot-scope="scope">
          <div>
            <div>下单账号：</div>
            <div>{{ scope.row.mobile }}</div>
            <div>↓</div>
            <div>{{ scope.row.receiver }}</div>
            <div>{{ scope.row.receiver_mobile }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="refund_money" align="center" label="退款金额">
      </el-table-column>
      <el-table-column prop="refund_point" align="center" label="退款积分">
      </el-table-column>

      <el-table-column prop="price" label="证明图片" align="center" min-width="150">
        <template slot-scope="scope">
          <div>
            <el-popover placement="left" title trigger="hover">
              <img class="table-img" :src="item" v-for="(item, index) in scope.row.voucher_images" :key="index" style="height: 100%;" />
              <img class="table-img" slot="reference" @click="openImg(item)" v-for="(item, index) in scope.row.voucher_images" :key="index" :src="item"
                style="height: 60px;width: 45px;margin-right: 10px;" />
            </el-popover>
            <!-- 	<img class="table-img mr10" v-for="(item,i) in scope.row.voucher_images" :key="i" :src="item" /> -->
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="售后操作">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rights_operate_status == 0">申请</el-tag>
          <el-tag type="success" v-if="scope.row.rights_operate_status == 1">同意</el-tag>
          <el-tag type="warning" v-if="scope.row.rights_operate_status == 2">买家已发货</el-tag>
          <el-tag type="success" v-if="scope.row.rights_operate_status == 3">商家已收到退货商品</el-tag>
          <el-tag type="warning" v-if="scope.row.rights_operate_status == 4">商家发起退款支付</el-tag>
          <el-tag type="success" v-if="scope.row.rights_operate_status == 5">已支付退款</el-tag>
          <el-tag type="danger" v-if="scope.row.rights_operate_status == 6">拒绝</el-tag>
          <el-tag type="info" v-if="scope.row.rights_operate_status == 7">自动关闭</el-tag>
          <el-tag type="info" v-if="scope.row.rights_operate_status == 8">主动撤消</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="售后状态">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.rights_refund_status == 0">待退款</el-tag>
          <el-tag type="success" v-if="scope.row.rights_refund_status == 1">退款成功</el-tag>
          <el-tag type="danger" v-if="scope.row.rights_refund_status == 2">退款失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" align="center" label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="operation(scope.row.id, 'view')">查看</el-button>
          <span v-if="scope.row.rights_type == 2">
            <!-- 退货 -->
            <el-button v-if="scope.row.rights_operate_status == 2" type="text" size="small"
                       @click="operation(scope.row.id, 'logistics')">查看物流</el-button>
            <el-button v-if="scope.row.rights_operate_status == 2" type="text" size="small"
                       @click="operation(scope.row.id, 'receive', scope.row.order_id)">收货</el-button>
            <el-button v-if="scope.row.rights_operate_status == 3 || scope.row.rights_operate_status == 4 || scope.row.rights_refund_status == 2"
                       type="text" size="small" @click="operation(scope.row.id, 'refund')">
              {{scope.row.rights_refund_status == 2 ? '重新退款' : '退款' }}
            </el-button>
          </span>
          <span v-if="scope.row.rights_type == 1">
            <el-button v-if="scope.row.rights_operate_status == 1 || scope.row.rights_operate_status == 4 || scope.row.rights_refund_status == 2"
                       type="text" size="small" @click="operation(scope.row.id, 'refund')">
              {{scope.row.rights_refund_status == 2 ? '重新退款' : '退款'}}
            </el-button>
          </span>
          <el-button v-if="scope.row.rights_refund_status == 0 && scope.row.rights_operate_status == 0"
                     type="text" size="small" @click="operation(scope.row.id)">操作</el-button>
          <el-button v-if="scope.row.rights_refund_status == 0 && (scope.row.rights_operate_status == 0 || scope.row.rights_operate_status == 1)"
                     type="text" size="small" @click="revokeRights(scope.row.user_id, scope.row.id)">撤销维权</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="dataForm.page" :page-sizes="[10, 20, 30, 50]"
      :page-size="dataForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <after-sale-details @result="result" v-if="setShareBenefit" ref="afterSaleDetails"></after-sale-details>

    <el-dialog top="5vh" title="物流信息" width="30%" :visible.sync="visible">
      <div v-loading="loading">
        <el-steps direction="vertical" finish-status="success" :active="info.traces.length" v-if="info.traces.length">
          <el-step v-for="(item, i) in tracesList" :key="i" :title="item.acceptTime" :description="item.acceptStation"></el-step>
        </el-steps>
        <div class="no-data" v-if="info.traces.length == 0">
          {{ info.reason }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import orderService from '@/api/orderService.js'
import AfterSaleDetails from './after-sale-details.vue'

export default {
  data () {
    return {
      dataForm: {
        page: 1,
        limit: 10,
        order_code: '',
        shop_name: '',
        receiver_mobile: '',
        order_creator_mobile: '',
        pay_refund_code: '',
        refund_status: null,
        operate_status: null,
        rights_type: null
      },
      dataList: [],
      total: null,
      dataListLoading: false,
      addOrUpdateVisible: false,
      setShareBenefit: false, // 弹窗
      visible: false, // 物流弹窗
      info: {
        traces: [],
        reason: '暂无信息'
      },
      tracesList: [],
      loading: false, // 物流加载
      seconds: 3
    }
  },
  components: {
    AfterSaleDetails
  },
  created () {
    this.loadList()
  },
  methods: {
    loadList () {
      orderService.afterSaleList(this.dataForm).then(res => {
        if (res.data && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.total = res.data.page.totalCount
        }
      })
    },
    openImg (e) {
      window.open(e)
    },
    handleSizeChange (e) {
      this.dataForm.limit = e
      this.dataForm.page = 1
      this.loadList()
    },
    handleCurrentChange (e) {
      this.dataForm.page = e
      this.loadList()
    },

    search () {
      this.dataForm.page = 1
      this.loadList()
    },

    // 操作
    operation (id, type) {
      if (type == 'receive') {
        // 收货
        this.$confirm('确定收货?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            orderService
              .receipt({
                rights_order_id: id
              })
              .then(res => {
                if (res.data && res.data.code == 200) {
                  this.$message.success('收货成功！')
                  this.loadList()
                }
              })
          })
          .catch(() => { })
      } else if (type == 'logistics') {
        // 查看物流
        this.loading = true
        this.visible = true
        orderService
          .viewLogistics(id)
          .then(res => {
            if (res.data && res.data.code == 200) {
              if (res.data.data) {
                this.info = res.data.data
                if (res.data.data.traces.length > 0) {
                  this.tracesList = res.data.data.traces.reverse()
                }
              }
            }
            this.loading = false
          })
          .then(res => {
            this.loading = false
          })
      } else if (type == 'refund') {
        // 退款
        this.$confirm('确定退款?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            orderService
              .refund({
                rights_order_id: id
              })
              .then(res => {
                if (res.data && res.data.code == 200) {
                  // this.countdown()
                  this.$message.success('退款成功！')
                  setTimeout(() => {
                    this.loadList()
                  }, 3000)
                }
              })
          })
          .catch(() => { })
      } else {
        this.setShareBenefit = true
        this.$nextTick(() => {
          this.$refs.afterSaleDetails.init(id, type)
        })
      }
    },
    result () {
      this.setShareBenefit = false
      this.loadList()
    },
    // countdown() {
    //   let timer = setInterval(() => {
    //     this.seconds--
    //     if (this.seconds == 0) {
    //       clearInterval(timer)
    //     }
    //   }, 1000)
    // },

    // 撤销维权
    revokeRights (user_id, id) {
      let msg = '确定要撤销用户的维权申请吗？'
      let params = {
        user_id: user_id,
        rights_order_id: id
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderService.revokeRights(params).then(res => {
          if (res.data && res.data.code == 200) {
            this.$message.success('操作成功！')
          }
        })
      }).catch((ex) => {
        this.$message.error(ex)
      })
    }
  }
}
</script>
<style lang="scss">
.mt30 {
  margin-top: 30px;
}
</style>
